<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular JS Scope</title>
    <script src="js/angular.min.js"></script>
</head>
<body>
<!--<div ng-app="myApp" ng-controller="myCtrl">-->
    <!--<h1>{{carname}}</h1>-->
<!--</div>-->

<!--<script>-->
    <!--var app = angular.module('myApp', []);-->
    <!--app.controller('myCtrl', function ($scope) {-->
        <!--$scope.carname = "Volvo";-->
    <!--})-->
<!--</script>-->

<!--Scope概述-->
<!--<div ng-app="myApp" ng-controller="myCtrl">-->
    <!--<input ng-model="name">-->
    <!--<h1>{{greeting}}</h1>-->
    <!--<button ng-click="sayHello()">点我</button>-->
<!--</div>-->
<!--<script>-->
    <!--var app = angular.module('myApp', []);-->
    <!--app.controller('myCtrl', function ($scope) {-->
        <!--$scope.name = "Runoob";-->
        <!--$scope.sayHello = function () {-->
            <!--$scope.greeting = 'Hello ' + $scope.name + '!';-->
        <!--}-->
    <!--})-->
<!--</script>-->

<!--Scope作用域-->
<!--<div ng-app="myApp" ng-controller="myCtrl">-->
    <!--<ul>-->
        <!--<li ng-repeat="x in names">{{x}}</li>-->
    <!--</ul>-->
<!--</div>-->

<!--<script>-->
    <!--var app = angular.module('myApp', []);-->
    <!--app.controller('myCtrl', function ($scope) {-->
        <!--$scope.names = ["Emil", "Tobias", "Linus"];-->
    <!--})-->
<!--</script>-->

<!--根作用域-->
<div ng-app="myApp" ng-controller="myCtrl">
    <h1>{{lastName}} 家族成员</h1>
    <ul>
        <li ng-repeat="x in names">{{x}} {{lastName}}</li>
    </ul>
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function ($scope, $rootScope) {
        $scope.names = ["Emil", "Tobias", "Linus"];
        $rootScope.lastName = "Refsnes";
    })
</script>
</body>
</html>